<template>
	<view>
		<view class="topContains bg-white px-6 py-4">
			<view class="color000 font-16 font-bold">
				师傅您好
			</view>
			<view class="font-12 color000 my-2">
				找回账号适用于手机号码无法使用的情况,您可以通过身份证绑定新手机号码
			</view>
			<view class="font-12 color-gray my-5">
				请填写您的姓名与身份证号码:
			</view>
			<view class="">
				<view>
					<u--input placeholder="请输入您的姓名" border="bottom" clearable v-model="parmas.name" @change=isBtnShow>
						<text slot="prefix" class="pr-10 font-14 color000">
							姓名
						</text>
					</u--input>
				</view>
				<view class="my-4">
					<u--input placeholder="请输入您的身份证号码" border="bottom" clearable v-model="parmas.idNumber"
						@change=isBtnShow>
						<text slot="prefix" class="pr-3 font-14 color000">
							身份证号
						</text>
					</u--input>
				</view>
			</view>
		</view>
		<view class="font-12 colorF47E3F bottomText px-6">
			<view class="mb-5">
				<view>
					功能说明:
				</view>
				<view class="my-1">
					1.找回账号仅针对已在平台注册成功的身份证号码;
				</view>
				<view class="my-1">
					2.成功找回并绑定新手机号后,3个月内不可再次使用"找回账号"功能.
				</view>
			</view>
			<u-button :disabled='isBtnTrue' text="确认并提交" type="primary" class="custom-style"></u-button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				parmas: {
					name: '',
					idNumber: '',
				},
				isBtnTrue: true,
			};
		},
		methods: {
			isBtnShow() {
				if (this.parmas.name != '' && this.parmas.idNumber != '') {
					this.isBtnTrue = false;
				} else {
					this.isBtnTrue = true;
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.topContains {
		height: 100vh;
	}
	.bottomText {
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		bottom: 120rpx;
		.custom-style {
			border-radius: 14rpx;
		}
	}
</style>